<template>
  <div class="wrapper">
    <div class="tab-wrapper auto-wrapper">
      <p>自动化标注结果</p>
      <List>
        <ListItem v-for="item in autoLabeled" :key="item['Criminals']">
          <div>
            <span>当事人：{{ item['Criminals'] }}</span>
            <span>性别：{{ item['Gender'] }}</span>
            <span>民族：{{ item['Ethnicity'] }}</span>
            <span>出生地：{{ item['Birthplace'] }}</span>
            <span>案由：{{ item['Accusation'] }}</span>
            <span>相关法院：{{ item['Courts'] }}</span>
          </div>
        </ListItem>
      </List>
    </div>
    <div class="tab-wrapper">
      <Tabs value="criminal">
        <TabPane label="当事人" name="criminal">
          <LabelItem @update-label="updateLabel" :selected-items="selectedItems['Criminals']" label="Criminals"></LabelItem>
        </TabPane>
        <TabPane label="性别" name="gender">
          <LabelItem @update-label="updateLabel" :selected-items="selectedItems['Gender']" label="Gender"></LabelItem>
        </TabPane>
        <TabPane label="民族" name="ethnicity">
          <LabelItem @update-label="updateLabel" :selected-items="selectedItems['Ethnicity']" label="Ethnicity"></LabelItem>
        </TabPane>
        <TabPane label="出生地" name="birthplace">
          <LabelItem @update-label="updateLabel" :selected-items="selectedItems['Birthplace']" label="Birthplace"></LabelItem>
        </TabPane>
        <TabPane label="案由" name="accusation">
          <LabelItem @update-label="updateLabel" :selected-items="selectedItems['Accusation']" label="Accusation"></LabelItem>
        </TabPane>
        <TabPane label="相关法院" name="courts">
          <LabelItem @update-label="updateLabel" :selected-items="selectedItems['Courts']" label="Courts"></LabelItem>
        </TabPane>
      </Tabs>
    </div>
    <Button type="primary" @click="saveAll">保存案件与标注</Button>
  </div>
</template>

<script>
import LabelItem from "@/components/LabelItem";
import {saveAllAPI} from "@/api/saveAll";

export default {
  name: "Labels",
  components: {LabelItem},
  computed: {
    content: {
      get() {
        return this.$store.state.content
      },
      set(val) {
        this.$store.commit('setContent', val)
      }
    },
    autoLabeled: {
      get() {
        return this.$store.state.autoLabeled
      },
      set(val) {
        this.$store.commit('setAutoLabeled', val)
      }
    },
    labels: {
      get() {
        return this.$store.state.labels
      },
      set(val) {
        this.$store.commit('setLabels', val)
      }
    },
  },
  data() {
    return {
      labelNames: {
        "Criminals": "当事人",
        "Gender": "性别",
        "Ethnicity": "民族",
        "Birthplace": "出生地",
        "Accusation": "案由",
        "Courts": "相关法院",
        "File": "文件名"
      },
      selectedLabels: {
        "Criminals": "",
        "Gender": "",
        "Ethnicity": "",
        "Birthplace": "",
        "Accusation": "",
        "Courts": "",
        "File": ""
      },
      selectedItems: {
        "Criminals": [],
        "Gender": [],
        "Ethnicity": [],
        "Birthplace": [],
        "Accusation": [],
        "Courts": [],
      }
    }
  },
  methods: {
    clearSelected() {
      this.selectedLabels = {
        "Criminals": "",
        "Gender": "",
        "Ethnicity": "",
        "Birthplace": "",
        "Accusation": "",
        "Courts": "",
        "File": ""
      }
      this.selectedItems = {
        "Criminals": [],
        "Gender": [],
        "Ethnicity": [],
        "Birthplace": [],
        "Accusation": [],
        "Courts": [],
      }
    },
    updateLabel(label, selectedItems) {
      console.log('sel', selectedItems)
      this.selectedLabels[label] = selectedItems.join('，')
      console.log(this.selectedLabels)
    },
    prepareLabels() {
      this.selectedLabels['File'] = this.autoLabeled[0]['File']
      let _this = this
      for (let key in this.selectedLabels) {
        if (this.selectedLabels[key].trim() === "") {
          if (key === 'Criminals') {
            this.$Message['error']({
              background: true,
              content: '当事人不能为空'
            })
            return false
          } else {
            this.$Message['warning']({
              background: true,
              content: '未标注' + _this.labelNames[key]
            })
            this.selectedLabels[key] = "未知"
          }
        }
      }
      return true
    },
    saveAll() {
      if (!this.prepareLabels()) {
        return
      }

      let formData = new FormData()
      formData.append('content', this.content)
      formData.append('autoLabeled', JSON.stringify(this.autoLabeled))
      formData.append('labels', JSON.stringify(this.selectedLabels))
      saveAllAPI(
          formData,
          (res) => {
            this.$Message['success']({
              background: true,
              content: '保存成功'
            })
            console.log('save succeeded', res)
          }, (msg) => {
            this.$Message['error']({
              background: true,
              content: '保存失败'
            })
            console.log('save failed', msg)
          }, () => {
          }
      )
    },
  }
}
</script>

<style>
.tab-wrapper {
  border: 1px lightgray solid;
  border-radius: 5px;
}

.auto-wrapper {
  padding: 10px 25px;
  text-align: start;
  margin-bottom: 10px;
}

.auto-wrapper p {
  font-size: 1rem;
  margin-left: -5px;
  font-weight: bold;
}

.auto-wrapper span {
  display: block;
  font-size: 1rem;
  font-weight: normal;
}

.wrapper {
  margin-bottom: 20px;
}

.ivu-tabs-nav-wrap {
  text-align: center;
}

.ivu-tabs-nav-scroll {
  display: inline-block;
}
</style>